



<template>
  <a-card title="职位管理" style="width: 300px">
    <div class="top">
      <div class="ltop">
        <a-select v-model:value="getcanshu.audit" @change="onSearch">
          <a-select-option value="zero">不限审核状态</a-select-option>
          <a-select-option value="0">待审核</a-select-option>
          <a-select-option value="1">已通过</a-select-option>
          <a-select-option value="2">未通过</a-select-option>
        </a-select>
        <a-select v-model:value="getcanshu.state" @change="onSearch">
          <a-select-option value="zero">不限招聘状态</a-select-option>
          <a-select-option value="False">已暂停</a-select-option>
          <a-select-option value="True">招聘中</a-select-option>
        </a-select>
      </div>
      <div class="rtop">
        <a-input-group compact>
          <a-input-search
            v-model:value="getcanshu.search"
            placeholder="请输入搜索内容"
            @search="onSearch"
            style="height: 32px; width: 200px"
          />
        </a-input-group>
      </div>
    </div>
    <!-- <a-table :dataSource="list" :columns="columns" :rowKey='record=>record.id'>

    </a-table> -->
    <a-table :columns="columns" :dataSource="list" rowKey="id">
      <template #tel="{ record }">
        <TeamOutlined />{{ record.member_mobile_phone_number }}
        <br /><ExceptionOutlined />{{ record.Position_mobile_phone_number }}
      </template>
      <template #audit_status="{ record }">
        <a-button type="primary" v-if="record.audit_status == 0"
          >待审核</a-button
        >
        <a-button
          type="primary"
          style="background: green"
          v-else-if="record.audit_status == 1"
          >已通过</a-button
        >
        <a-button type="primary" danger v-else-if="record.audit_status == 2"
          >未通过</a-button
        >
      </template>
      <template #btime="{ record }">
        <FieldTimeOutlined />{{ record.create_time }}
        <br /><FieldTimeOutlined />{{ record.update_time }}
      </template>
      <template #ztype="{ record }">
        <a-button type="primary" v-if="record.company_type">招聘中</a-button>
        <a-button type="primary" danger v-else>已暂停</a-button>
      </template>
      <template #tui="{ record }">
        <a-button type="link" @click="showModal(record.poster)" ghost
          >[推广]</a-button
        >
        <a-button type="link" ghost @click="fuzhi(`${record.company_name}`)"
          >[复制]</a-button
        >
      </template>

      <template #cao="{ record }">
        <a-button type="primary">管理</a-button> &nbsp;
        <a-button type="primary" @click="bianji({ ...record })">编辑</a-button
        >&nbsp;
        <a-button
          type="ghost"
          @click="showModa2(record.audit_status, record.id)"
          >审核</a-button
        >&nbsp;
        <a-button type="primary" @click="deldata(record.id)" danger
          >删除</a-button
        >
      </template>
    </a-table>
  </a-card>

  <a-modal
    v-model:visible="visible"
    title="推广图片"
    width="615px"
    @ok="handleOk"
  >
    <img :src="tuiguangimg" alt="" />
  </a-modal>
  <a-modal
    v-model:visible="p.visible"
    title="将所选职位设置为"
    width="615px"
    @ok="handleOk22"
  >
    认证状态

    <a-radio-group name="审核" v-model:value="p.audit_status">
      <a-radio :value="0">待审核</a-radio>
      <a-radio :value="1">已通过</a-radio>
      <a-radio :value="2">未通过</a-radio>
    </a-radio-group>
  </a-modal>
</template>

<script lang="ts" setup>
import { toRefs, onMounted, reactive } from "vue";
import axios from 'axios'
import {
  FieldTimeOutlined,
  TeamOutlined,
  ExceptionOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
let lisdata = reactive({
  list: [{company_name:'zs',id:1}], // 获取数据
  visible: false,
  p: {
    visible: false,
    audit_status: 0,
    id: "",
  },
  tuiguangimg: "",
  getcanshu: {
    // get获取参数
    audit: "zero", // 审核状态
    state: "zero", // 招聘状态
    search: "", // 搜索
    page: 1, // 当前页数
    pagesize: 10, // 每一页多少条数据
  },
});
/*复制命令兼容各种浏览器*/
const fuzhi = (copyContent: string) => {
  var copyTextarea = document.createElement("textarea");
  document.body.appendChild(copyTextarea);
  copyTextarea.innerText = copyContent;
  copyTextarea.select();
  document.execCommand("Copy");
  copyTextarea.remove();
};

const showModal = (url: any) => {
  lisdata.visible = true;
  lisdata.tuiguangimg = url;
};
const showModa2 = (url: any, id: any) => {
  lisdata.p.visible = true;
  lisdata.p.audit_status = url;
  lisdata.p.id = id;
};

const handleOk = (e: any) => {
  lisdata.visible = false;
};
const handleOk22 = async (e: any) => {
  let res=await axios.put('',{ audit_status: lisdata.p.audit_status, id: lisdata.p.id });
  getdata(lisdata.getcanshu);
  lisdata.p.visible = false;
};
const deldata = async (id: any) => {
  let res=await axios.delete(`?id=${id}`);
  getdata(lisdata.getcanshu);
};

const onSearch = () => {
  getdata(lisdata.getcanshu);
};
onMounted(() => {
  getdata(lisdata.getcanshu);
});
const getdata = async (getcanshu: any) => {
  let { data } = await axios.get('',getcanshu);
  lisdata.list = data.data;
};

const bianji = (data: any) => {
  console.log({ ...data });

  router.push({ path: '/user/job/putlist', query: data });
};

const columns = [
  {
    title: "职位名称",
    dataIndex: "company_name",
    key: "company_name",
  },
  {
    title: "会员/职位手机号",
    key: "member_mobile_phone_number",
    slots: { customRender: "tel" },
  },
  {
    title: "审核状态",
    key: "audit_status",
    slots: { customRender: "audit_status" },
  },
  {
    title: "创建/刷新时间",
    key: "create_time",
    slots: { customRender: "btime" },
  },
  {
    title: "职位状态",
    key: "ztype",
    slots: { customRender: "ztype" },
  },
  {
    title: "推广",
    key: "tuiguang",
    slots: { customRender: "tui" },
  },
  {
    title: "操作",
    key: "cao",
    slots: { customRender: "cao" },
  },
];

let { list, getcanshu, visible, tuiguangimg, p } = toRefs(lisdata);
</script>
<style scoped>
.top {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.ltop .ant-select {
  margin-right: 20px;
}
.rtop {
  display: flex;
}
.rtop .ant-select {
  width: 100px;
  border-right: none;
}
</style>